<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-cover bg-center flex flex-col items-center justify-center p-4" style="background-image: url('http://localhost:8080/upload/42193594b1609a6bf4e5e70b66dc7234.jpg')">
    <!-- Logo及标题区域 -->
    <div class="text-center mb-8">
      <div class="w-20 h-20 mx-auto mb-4 bg-[#4E7B9E] rounded-full flex items-center justify-center">
        <i class="el-icon-user-solid text-white text-3xl"></i>
      </div>
      <h1 class="text-3xl font-bold text-[#2C3E50]">养老易管理系统</h1>
    </div>
    <!-- 登录方式选择 -->
    <div class="w-full max-w-md">
      <div class="flex border-b border-gray-200 mb-6">
        <button
            v-for="(tab, index) in tabs"
            :key="index"
            @click="activeTab = index"
            :class="{
              'text-[#4E7B9E] border-b-2 border-[#4E7B9E]': activeTab === index,
              'text-gray-500': activeTab !== index
              }"
            class="flex-1 py-3 font-medium text-center focus:outline-none"
        >
          {{ tab }}
        </button>
      </div>
      <!-- 登录表单 -->
      <div class="bg-white rounded-lg shadow-md p-8">
        <div class="space-y-6">
          <!-- 账号输入框 -->
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="el-icon-user text-gray-400"></i>
            </div>
            <input
                type="text"
                v-model="loginForm.username"
                placeholder="请输入账号"
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md focus:ring-1 focus:ring-[#4E7B9E] focus:border-[#4E7B9E] outline-none transition"
            >
          </div>
          <!-- 密码输入框 -->
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="el-icon-lock text-gray-400"></i>
            </div>
            <input
                type="password"
                v-model="loginForm.password"
                placeholder="请输入密码"
                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md focus:ring-1 focus:ring-[#4E7B9E] focus:border-[#4E7B9E] outline-none transition"
            >
          </div>
          <!-- 验证码输入框 -->
          <div class="relative mt-4">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="el-icon-key text-gray-400"></i>
            </div>
            <input
                type="text"
                v-model="loginForm.capath"
                placeholder="请输入验证码"
                class="w-full pl-10 pr-32 py-3 border border-gray-300 rounded-md focus:ring-1 focus:ring-[#4E7B9E] focus:border-[#4E7B9E] outline-none transition"
            >
            <div class="absolute inset-y-0 right-0 flex items-center pr-3">
              <!--<div class="h-10 bg-gradient-to-r from-blue-400 to-blue-600 rounded flex items-center justify-center px-4">-->
              <!--  <span class="text-white font-mono tracking-widest">{{ captchaCode }}</span>-->
              <!--</div>-->
              <!--<button @click="generateCaptcha" class="ml-2 text-blue-600 hover:text-blue-800 transition">-->
              <!--  <i class="el-icon-refresh-right"></i>-->
              <!--</button>-->
              <el-image style="width: 120px; height: 38px" :src="imageBase64Data" @click="getCapath" />
            </div>
          </div>
          <!-- 记住密码和忘记密码 -->
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input
                  type="checkbox"
                  id="remember"
                  v-model="rememberMe"
                  class="h-4 w-4 text-[#4E7B9E] focus:ring-[#4E7B9E] border-gray-300 rounded"
              >
              <label for="remember" class="ml-2 block text-sm text-gray-700">记住密码</label>
            </div>
            <a href="#" class="text-sm text-gray-500 hover:text-[#4E7B9E] transition">忘记密码?</a>
          </div>
          <!-- 登录按钮 -->
          <button
              @click="login"
              class="w-full py-3 px-4 bg-[#4E7B9E] hover:bg-[#3A6A8C] text-white font-medium rounded-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-[#4E7B9E] focus:ring-opacity-50 !rounded-button whitespace-nowrap"
          >
            {{ loading ? '登录中...' : '立即登录' }}
          </button>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="mt-8 text-center text-gray-500 text-sm">
      <p>© 2023 养老易管理系统 版权所有</p>
      <p class="mt-1">技术支持：养老易技术团队</p>
    </div>
  </div>
</template>
<script  setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useTokenStore } from '@/stores/token';
import loginApi from '@/api/loginApi';
import router from '@/router';
import {useUserStore} from "@/stores/user.js";
import elderlyApi from "@/api/user/elderlyApi.js";
import medicalApi from "@/api/emp/medicalApi.js";
const tokenStore = useTokenStore();
const userStore = useUserStore();
const loginForm = ref({
  username: '',
  password: '',
  capath: '',
  capathID: '',
  role: ''
})
const imageBase64Data = ref('');
const tabs = ['管理员登录', '员工登录', '用户登录'];
const activeTab = ref(0);
const rememberMe = ref(false);
const loading = ref(false);

//定义登录方法
const login = () => {
  if (activeTab.value === 0) {
    loginApi.login(loginForm.value.username, loginForm.value.password, loginForm.value.capath, loginForm.value.capathID)
        .then(resp => {
          if (resp.code === 10000) {
            //弹出成功消息
            ElMessage.success({
                  message: "登录成功",
                  duration: 1200,
                  onClose: () => {
                    //将jwt保存在store
                    tokenStore.update(resp.data)
                    getInfo();
                  }
                })
          } else {
            //弹出失败消息
            ElMessage.error(resp.msg)
          }
        })
  }
  if (activeTab.value === 1) {
    loginApi.login(loginForm.value.username, loginForm.value.password, loginForm.value.capath, loginForm.value.capathID)
        .then(resp => {
          if (resp.code === 10000) {
            //弹出成功消息
            ElMessage.success({
                  message: "登录成功",
                  duration: 1200,
                  onClose: () => {
                    //保存jwt到tokenStorge
                    tokenStore.update(resp.data)
                    getEmpInfo()
                  }
                }
            )
          } else {
            //弹出失败消息
            ElMessage.error(resp.msg)
          }
        })
  }
  if (activeTab.value === 2) {
    loginApi.userLogin(loginForm.value.username, loginForm.value.password, loginForm.value.capath, loginForm.value.capathID)
        .then(resp => {
          if (resp.code === 10000) {
            //弹出成功消息
            ElMessage.success({
                  message: "登录成功",
                  duration: 1200,
                  onClose: () => {
                    //保存jwt到storage
                    tokenStore.update(resp.data)
                    getUserInfo()
                  }
                }
            )
          } else {
            //弹出失败消息
            ElMessage.error(resp.msg)
          }
        })
  }
}
//定于获取验证码的函数
const getCapath = () => {
  loginApi.getCapath()
      .then(resp => {
        if (resp.code === 10000) {
          imageBase64Data.value = resp.data.imageBase64Data
          loginForm.value.capathID = resp.data.capathID
        } else {
          ElMessage.error(resp.data)
        }
      })
}
//获取管理员信息的方法
const getInfo = () => {
  loginApi.getAdminInfo()
      .then(resp => {
        if (resp.code == 10000){
          //将已登录信息保存到pinia中
          userStore.updateUser(resp.data);
          router.push('/index');
        }

      })
}
// 获取用户信息的方法
const getUserInfo = () => {
  elderlyApi.eldInfo()
      .then(resp => {
        if (resp.code == 10000){
          //将已登录信息保存到pinia中
          userStore.updateUser(resp.data);
          //跳转到后台界面
          router.push('/oldinfo');
        }

      })
}
// 获取护工信息的方法
const getEmpInfo = () => {
  medicalApi.empInfo()
      .then(resp => {
        if (resp.code == 10000){
          //将已登录信息保存到pinia中
          userStore.updateUser(resp.data);
          //跳转到后台界面
          router.push('/empinfo');
        }

      })
}
getCapath();
</script>
<style scoped>
/* 自定义输入框焦点样式 */
input:focus {
  box-shadow: 0 0 0 3px rgba(78, 123, 158, 0.2);
}
/* 按钮加载动画 */
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>
